<template>
    <div class="bottom-card">
        <div class="bottom-card-title">
            <span class="title">{{ title }}</span>
            <div class="line">
                <div class="line-item"></div>
                <div class="line-item"></div>
                <div class="line-item"></div>
                <div class="line-item"></div>
            </div>
        </div>
        <div class="bottom-card-content">
            <div v-for="(item, index) in labelList" :key="index" class="bottom-card-content-item">
                <span class="BigText">{{ item }}</span>
                <span class="revenue">{{ contentList[index]?.day }}</span>
                <div class="compare">
                    <div class="samllText">
                        <div class="text">较上月</div>
                        <span class="red">
                            <svg
                                t="1747469108626"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="4581"
                                width="14"
                                height="11"
                            >
                                <path
                                    d="M623.264 1015.904v-669.6h223.488L512 8.096 177.248 346.32h231.84v669.6h214.176z"
                                    :fill="index === 2 || index === 4 ? '#00c04f' : '#f02a11'"
                                    p-id="4582"
                                ></path>
                            </svg>
                            {{ contentList[index]?.month }}
                        </span>
                    </div>
                    <div class="samllText">
                        <div class="text">环比</div>
                        <span class="red">
                            <svg
                                t="1747469627359"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="7565"
                                width="14"
                                height="11"
                            >
                                <path d="M435.2 585.9328V0h153.6v585.9328h256L512 1024 179.2 585.9328z" fill="#f02a11" p-id="7566"></path>
                            </svg>
                            {{ contentList[index]?.year }}
                        </span>
                    </div>
                </div>
                <div class="left-bottom"></div>
                <div class="right-bottom"></div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'bottomCard',
    props: {
        title: {
            type: String,
            default: ''
        },
        type: {
            type: Boolean,
            default: true
        },

        contentList: {
            type: Array,
            default: () => [
                {
                    day: 16.5,
                    month: 165.5,
                    year: 1957.2,
                    preMonth: 10.2,
                    hb: 53.3
                },
                {
                    day: 165.5,
                    month: 165.5,
                    year: 1957.2,
                    preMonth: 10.2,
                    hb: -53.3
                },
                {
                    day: 165.5,
                    month: 165.5,
                    year: 1957.2,
                    preMonth: 10.2,
                    hb: 53.3
                }
            ]
        }
    },
    data() {
        return {
            labelList: [],
            labelListRevenue: ['日营收', '月营收', '年营收'],
            labelList2: ['日用量', '月用量', '年用量']
        }
    },
    // watch: {
    //   type(val) {
    //     if (val) {
    //       this.labelList = this.labelListRevenue;
    //     } else {
    //       this.labelList = this.labelList2;
    //     }
    //   },
    // },
    mounted() {
        this.labelList = this.type ? this.labelListRevenue : this.labelList2
    },
    methods: {}
}
</script>
<style scoped lang="scss">
.bottom-card {
    padding: 10px;
    width: 100%;
    background-color: #364feb4f;
    border-radius: 5px;
    .bottom-card-title {
        font-size: 16px;
        margin-bottom: 10px;
        .line {
            display: flex;
            gap: 5px;
            margin-left: 5px;
            margin-top: 5px;
            .line-item {
                width: 5px;
                height: 5px;
                background-color: #65feff;
                transform: skewX(49deg);
            }
        }
    }
    .bottom-card-content {
        display: flex;
        gap: 5px;
        .bottom-card-content-item {
            display: flex;
            flex-direction: column;
            gap: 5px;
            flex: 1;
            position: relative;
            height: 100%;
            padding: 5px 5px 7px;
            border-radius: 5px;
            border: 1.7px solid rgb(88 135 230 / 52%);
            // background-image: url("../../../../assets/images/index/largeScreen/rectangle.png");
            // background-size: 100% 100%;
            // background-repeat: no-repeat;
            background-color: #011b58c7;
            box-shadow: inset 0px 0px 10px rgb(59 69 205 / 72%);
            /* 左上角棱角 */
            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 5px;
                height: 5px;
                border-left: 1px solid #57dae5;
                border-top: 1px solid #57dae5;
            }

            /* 右上角棱角 */
            &::after {
                content: '';
                position: absolute;
                right: 0;
                top: 0;
                width: 5px;
                height: 5px;
                border-right: 1px solid #57dae5;
                border-top: 1px solid #57dae5;
            }

            /* 左下角棱角 */
            .left-bottom {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                width: 5px;
                height: 5px;
                border-left: 1px solid #57dae5;
                border-bottom: 1px solid #57dae5;
            }

            /* 右下角棱角 */
            .right-bottom {
                content: '';
                position: absolute;
                right: 0;
                bottom: 0;
                width: 5px;
                height: 5px;
                border-right: 1px solid #57dae5;
                border-bottom: 1px solid #57dae5;
            }

            .revenue {
                color: #65feff;
                font-size: 20px;
                margin-left: 10px;
            }
            .compare {
                display: flex;
                flex-direction: column;
                border-radius: 5px;
                background-color: #0c2b6b;
                display: flex;
                gap: 5px;
                padding: 5px;
                .samllText {
                    display: flex;
                    align-items: center;
                    font-size: 15px;
                }
            }
            .BigText {
                font-size: 16px;
                color: #9ca6be;
                margin-left: 10px;
            }
            .text {
                color: #9ca6be;
                width: 46px;
                // .arrow{
                //   font-size: 14px;
                // }
            }
            .red {
                color: red;
            }
        }
    }
}
</style>